<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>智能表单</title>
	<style type="text/css">
	.smartForm ul li{height: 30px;line-height: 30px;list-style-type: none;}
	</style>
</head>
<body>
	<form class="smartForm" method="get">
		<ul>
			<li>邮件地址：<input type="email" name="email" required placeholder="请输入email地址"/></li>
			<li>链接地址：<input type="url" /></li>
			<li>数字：<input type="number" /></li>
			<li>颜色：<input type="color" /></li>
			<li>列表：<input type="text" list="datalist"/></li>

			<datalist id ="datalist">
				<option label="top1" value="卧虎藏龙">
			</datalist>

			<li>date类型：<input type="date"/></li>
			<li>月份类型：<input type="month"/></li>
			<li>周类型：<input type="week"/></li>
			<li>时间类型：<input type="time"/></li>
			<li>滑动类型：<input type="range" min="0" max="50" step="1"/></li>
			<li>搜素类型：<input type="search" results="n"/></li>
			<li>正则表达式：<input type="text" required pattern="[789]"/></li>
		</ul>
		<input type="submit" value="提交"/>

	</form>
</body>
</html>